<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>内部转账</title>
		<meta charset='utf-8'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<!-- 引入 Bootstrap -->
			<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
			<link href="${pageContext.request.contextPath }/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="${pageContext.request.contextPath }/js/jquery.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath }/js/foundation-datepicker.min.js"></script>
		<script src="${pageContext.request.contextPath }/js/locales/foundation-datepicker.zh-CN.js"></script>
    </head>
	
	<style>
		#transdiv{
			width:670px;
			margin:200px auto;
		}
	</style>
	
	<body>
		<div id="transdiv">
			<h4> <span class=""></span> 电子银行 &gt; 内部转账 </h4>
			<hr/>
			
			<form class="form form-horizontal" id='trans' action="#" method="post">
				<div class="row form-group">
					<label class="control-label col-xs-2">当前余额 : </label>
					<div class="col-xs-6">
						<input name="balance" type="hidden" value="1800.00" />
						<label class="control-label text-danger">1800.00</label>
					</div>
				</div>
				<div class="row form-group">
					<label class="control-label col-xs-2">对方会员名 : </label>
					<div class="col-xs-6">
						<input class="form-control time" name="gname" onblur="checkUserExists()" required maxlength="30">
					</div>
					<div class="col-xs-4">
						<p id='tipgname' class="form-control-static hide text-danger">对方会员名不能为空</p>
					</div>
				</div>
				<div class="row form-group">
					<label class="control-label col-xs-2">转账金额 : </label>
					<div class="col-xs-6">
						<input class="form-control" name="money" required maxlength="50">
					</div>
					<div class="col-xs-4">
						<p id='tipmoney' class="form-control-static hide text-danger">转账金额不能大于余额</p>
					</div>
				</div>
				<div class="row form-group">
					<label class="control-label col-xs-2">二级密码 : </label>
					<div class="col-xs-6">
						<input class="form-control" name="twopwd" required maxlength="6">
					</div>
					<div class="col-xs-4">
						<p id='tippwd' class="form-control-static hide text-danger">二级密码不能为空!</p>
					</div>
				</div>
				<div class="row form-group pull-right">
					<button type="button" class="btn btn-success" onclick="show()">提交申请</button>
				</div>
				
			</form>
			
		</div>
		
		<div class="modal fade" id="transinfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">确认信息</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<label class="col-xs-3">转账目标会员 : </label>
							<div class="col-xs-6">
								<span class="form-control-static" id='gname'>sl_user03</span>
							</div>
						</div>
						<div class="row">
							<label class="col-xs-3">转账金额 : </label>
							<div class="col-xs-6">
								<span class="form-control-static" id='money'>200.00 ( 元 )</span>
							</div>
						</div>
						<div class="row">
							<label class="col-xs-3">转账时间 : </label>
							<div class="col-xs-6">
								<span class="form-control-static" id='time'>2012-2-2 12:23:32</span>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="submitTrans()">确定</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		
	</body>
	
	<script>
		//往模态框中的信息对应的id显示对应的信息
		function setValue(id,value){
			$("#"+id).text(value);
		}
		
		//获取表单数据,并校验是否为空
		function getValByName(name){
			return $("#trans").find('input[name='+name+']').val();
		}
		
		//封装获取表单数据和赋给 模态框中的过程
		function changeTextByVal(id){
			var idval=getValByName(id);
			setValue(id,idval);
		}
		
		var existsGname=false;
		
		//将所有表单数据填入 模态框 并校验余额,弹出模态框
		function show(){
			if(existsGname){
				$("#trans").find("div div p").addClass("hide")
				var balance=parseFloat(getValByName('balance'))
				var gname=getValByName('gname')
				var money=getValByName('money');
				var twopwd=getValByName('twopwd')
				var flag=true;
				if(money.trim()==''){
					$("#tipmoney").text("转账金额不能为空");
					$("#tipmoney").removeClass('hide');
					flag=false;
				}else{
					if(parseFloat(money)>balance){
						$("#tipmoney").text("转账金额不能大于余额");
						$("#tipmoney").removeClass('hide');
						flag=false;
					}
				}
				if(gname.trim()==''){
					$("#tipgname").removeClass('hide');
					flag=false;
				}
				if(twopwd.trim()==''){
					$("#tippwd").removeClass('hide');
					flag=false;
				}
				if(flag){
					setValue('money',money);
					setValue('gname',gname);
					$('#transinfo').modal('show');
				}
			}else{
				$("#tipgname").text('对方会员名不存在');
				$("#tipgname").removeClass('hide');
			}
			
		}
		
		//检查对方会员名是否存在
		function checkUserExists(){
			var gname=getValByName('gname')
			$.get('${pageContext.request.contextPath}/user_exists.do?name='+gname,function(rs){
				if(rs||rs=='true'){
					$("#tipgname").addClass('hide');
					existsGname=true;
				}else{
					$("#tipgname").text('对方会员名不存在');
					existsGname=false;
					$("#tipgname").addClass('hide');
				}
			});
		}
		
		//提交申请表单
		function submitTrans(){
			$("#trans").submit();
		}
		
		//为模态框添加 按键 Esc 关闭功能
		$('#transinfo').modal({
			keyboard: true
		})
		
		//初始化隐藏
		$("#transinfo").modal('hide')
		
		//为确认信息中的时间信息添加 当前时间数据
		var now=new Date();
		var strtime=now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate()+' '+now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
		$("#time").text(strtime);
	
	</script>
	
</html>